<template>
	<view>
		<!-- 修改密码 -->
		<uni-card>
			<view class="top" @click="navRouter('/pages/register/login/modifyPass')">
				<view class="changePassword">
					修改密码
				</view>
				<uni-icons type="arrowright" ></uni-icons>
			</view>	
		</uni-card>
		
		<!-- 消息通知 -->
		<uni-card>
			<view class="notification">
				<view class="choose">
					<view class="choose-left">
						消息通知
					</view>
					 <switch checked  @change="switch1Change" />
				</view>
				<view class="choose">
					<view class="choose-left">
						困人消息
					</view>
					<switch @change="switch2Change" />
				</view>
				<view class="choose">
					<view class="choose-left">
						故障消息	
					</view>
					<switch @change="switch2Change" />
				</view>
			</view>
			
		</uni-card>
		
		<!-- 提示音 震动 -->
		<uni-card>
			<view class="choose">
				<view class="choose-left">
					提示音
				</view>
				 <switch checked  @change="switch1Change" />
			</view>
			<view class="choose" style="border-bottom: none;">
				<view class="choose-left" >
					震动
				</view>
				<switch @change="switch2Change" />
			</view>
		</uni-card>
		
		<!-- 关于 -->
		<uni-card>
			<view class="choose" @click="goAbout">
				<view class="changePassword">
					关于
				</view>
				<uni-icons type="arrowright" ></uni-icons>
			</view>	
			<view class="choose" @click="updateApp"  style="border-bottom: none;">
				<view class="changePassword">版本更新</view>
				<uni-icons type="arrowright" ></uni-icons>
			</view>	 
		</uni-card>
		
		<!-- 退出 -->
		<uni-card>
			<view class="top"  @click="logout">
				<view class="changePassword">
					退出
				</view>
				<uni-icons type="arrowright" ></uni-icons>
			</view>	
		</uni-card>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex"
	
	import login from "@/serve/api/login.js";
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
			...mapMutations(['logout']),
	
			switch1Change: function (e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
			},
			switch2Change: function (e) {
				console.log('switch2 发生 change 事件，携带值为', e.target.value)
			},
			
			updateApp(){
				// #ifdef APP-PLUS
				let that = this;
				plus.runtime.getProperty(plus.runtime.appid, async function(widgetInfo) {
					let parme = {
						version: widgetInfo.version,
					}
					const info = await login.UpdateInfo(parme);
					if (info.data.data.update) {
							uni.showModal({
								title: '有新的版本',
								content:'是否选择更新',
								success: showResult => {
									if (showResult.confirm) {
										that.updateAppAll(info.data.data[plus.os.name])
									}
								},
							})
						
					}else{
						that.tip("已经是最新版本")
					}
				});
				// #endif
			},
			/** 整包更新 */
			updateAppAll(openUrl) {
				if (plus.os.name === 'iOS') {
					plus.runtime.openURL(openUrl)
				} else {
					this.tip("正在后台下载")
					var dtask = plus.downloader.createDownload(openUrl, {}, function(d, status) {
						if (status === 200) { 
							var path = d.filename
							plus.runtime.install(path)
						} else {
							alert('下载失败' + status)
						}
					})
					dtask.start()
				}
			},
			// 点击跳转关于页面
			goAbout(){
				uni.navigateTo({
					url:"../about/about"
				})
			}
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}
	
	page {
		width: 750rpx;
		background: #EFF2F5;
		overflow: hidden;
	}
	
	view {
		font-size: 28rpx;
		line-height: 1.8;
	
	}
	switch{
		transform: scale(0.7,0.7)
	}
	.uni-card{
		width: 670rpx;
		/* height: 315rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		border: none;
		border: 0;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	
	.top{
			/* height: 96rpx; */
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;	
	}
	.changePassword{
		color: #34363D;	
		font-size: 26rpx;
	}
	/* 消息通知 */
	.notification{
		/* padding-bottom: none; */
	}
	.choose{
		height: 96rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		/* text-align: center; */
		border-bottom: 1px solid #E2E6EF;
	}
	.choose:nth-child(3){
		border-bottom: none;
		
	}
	.choose-left{		
		font-size: 24rpx;
		text-align: left;
		color: #34363D;
	}
	
</style>
